/* eslint-disable jsx-a11y/alt-text */
import "./style.css";
import titleImg from "../../assets/title-pic.png";

import DemoColumn from "../Chart/columnChart";
import DemoGauge from "../Chart/finishedChart";
import SmallSwitchTabAndPie from "../SmallSwitchTab";
import refresh from "../../assets/refresh.png";
import weatherPic from "../../assets/weather.png";
import { useEffect, useMemo, useState } from "react";
import linePic from "../../assets/line.png";
import MultipeItem from "../Carousel";
import News from "../news";
import leftUnSelect from "../../assets/smallTab/left-unselect-tab.png";
import rightUnselect from "../../assets/smallTab/right-unselect-tab.png";
import leftSelect from "../../assets/smallTab/left-select-tab.png";
import rightSelect from "../../assets/smallTab/right-select-tab.png";
import { diva } from "../../global";
import playPic from "../../assets/play.png";
// title: 名称
// content: 是否有解释内容
// arrFirstRow: 数组 每三个一组 => 属性有title/num/symbol(非必有)
// function compareDate(dateTime1, dateTime2) {
function compareDate(val) {
  if (val == 1) {
    return "#FF4E4E";
  } else {
    return "#fff";
  }
}
const a = "#257985";
const b = "#1F4B55";
const ContentBox = ({
  title,
  content,
  companyyIndex,
  arrFirstRow,
  arrSecondRow,
  infoFirstTab,
  infoSecondTab,
  conpantyIndex,
  infoThirdTab,
  verticalInfo,
  verticalSecondInfo,
  selectFirst,
  selectSecond,
  tableListName,
  tableList,
  pic,
  lineChart,
  picText,
  companyExample,
  pieChart,
  finished,
  PieIndex,
  SmallSwitchTab, //小的切换tab
  weather,
  iconAndTextFirstColumn,
  iconAndTextSecondColumn,
  fengxian,
  iconAndTextThirdColumn,
  news, // 是否有新闻
  height,
  companyDetail, //这个是新增的企业认养信息板块的第一板块
  width,
  company, //收获信息+专属客服电话
  line,
  mutiple,
  weatherFirst,
  setSelect,
  companyIndex,
  companyShow,
  middleBoxName,
  tableIndex,
  plantIndex,
  middleNameIndex,
  makeMiddleBox,
  getPIcDetail,
  color,
  piccIndex,
  getVideoIndex,
  companySinglePic,
}) => {
  const [options, setOptions] = useState({
    _v: 1,
    owner: 1,
    plant: 1,
    adopt: 0,
  });
  const setSelectInfo = setSelect;
  const tableIndexInfo = tableIndex;
  const middleName = makeMiddleBox;
  const pictureIndex = getPIcDetail;
  const videooIndex = getVideoIndex;
  const viddeoIndex = conpantyIndex;

  
  const [picIndex, setPicIndex] = useState(-1);
  const [videoIndex, setVideoIndex] = useState(-1);
  const plantInfo = plantIndex;
  const [value, setValue] = useState();
  const setCompanyIndex = companyIndex;
  const [select, setOptionSelect] = useState(false);
  const setCompanyDifferent = companyShow;
  const [secondOption, setSecondOption] = useState({
    status: 1,
    control_type: 1,
    run_status: 1,
  });
  const [selectIndex, setSelectIndex] = useState(0);
  const [selectCompany, setSelectCompany] = useState(-1);
  // const [date, setDate] = useState();
  const BoxsName = (val) => {
    middleName(val);
  };
  
const jumpTo = (val)=>{
const name=`${val.town_info.substring(0, val.town_info.length-1)+'企业'+val.district_number}`;
diva.client
        ?.applyScene(name)
        .then(() => {});
}

  const onClickFunction = (title, index) => {
    if (title === "企业认养信息") {
      setCompanyIndex(index);
    }
    if (title === "种植管理") {
      plantInfo(index);
    }
  };
  const setSelectedOption = (e, title, ComponentTitle) => {
    if (ComponentTitle === "种植管理") {
      title === "_v"
        ? setOptions({
            ...options,
            _v: e.target.value,
          })
        : title === "owner"
        ? setOptions({
            ...options,
            owner: e.target.value,
          })
        : title === "plant"
        ? setOptions({
            ...options,
            plant: e.target.value,
          })
        : setOptions({
            ...options,
            adopt: e.target.value,
          });
    } else {
      title === "status"
        ? setSecondOption({
            ...secondOption,
            status: e.target.value,
          })
        : title === "control_type"
        ? setSecondOption({
            ...secondOption,
            control_type: e.target.value,
          })
        : setSecondOption({
            ...secondOption,
            run_status: e.target.value,
          });
    }
  };

  const onSearchBtn = (e, title) => {
    if (title === "种植管理") {
      if (e === "search") {
        setSelectInfo({
          ...options,
        });
      } else {
        setSelectInfo();
        setOptionSelect(true);
      }
    } else {
      if (e === "search") {
        setSelectInfo({
          ...secondOption,
        });
      } else {
        setSelectInfo();
        setOptionSelect(true);
      }
    }
  };

  const changeTheScene = (title, name, index,pageIndex) => {
    if (pageIndex===2) {
      diva.client?.request("PlayCameraTrack", {
        name:
          index === 0
            ? "涂市镇"
            : index === 1
            ? "铜鼓镇"
            : index === 2
            ? "李溪镇"
            : "花田乡",
        loop: false,
        camera: true,
        env: true,
        animation: true,
      });
    } else {
      diva.client
        ?.applyScene(title==='酉阳'?'稻场总览':
          title === "涂市镇"
            ? "单独区域涂市"
            : title === "李溪镇"
            ? "单独区域李溪镇"
            : title === "铜鼓镇"
            ? "单独区域铜鼓镇"
            : title === "花田乡"
            ? "单独区域花田乡"
            : "单独区域南腰界"
        )
        .then(() => {});
    }
  };

  const onChangeCamera = (t, id) => {
    if (t !== "设备总量") return;
    const name = middleBoxName === "涂市镇" ? "涂大镇" : middleBoxName;
    tableIndexInfo({ id, name, middleBoxName });
  };
  useEffect(() => {
    // if(middleBoxName){
    setOptionSelect(true);
    // }
  }, [middleBoxName]);
  useEffect(() => {
    setPicIndex(piccIndex===undefined?-1 :piccIndex);
  
  }, [piccIndex]);

  useEffect(() => {
    if (title === "企业认养信息") {
      setSelectCompany(0);
    }
  }, []);
  useEffect(() => {
   if(title==='企业认养信息'){
    setSelectCompany(0);
   }
   if(title==='设备总量'||title==='种植管理'){
    setSelectCompany(-1);
   }

  }, [tableList]);
  useEffect(() => {
   if(pic==='http://yyydm-api.yunshangdaomi.com/uploads/adm_images/u177_div.jpg') {
    setPicIndex(0)
   }
  }, [pic]);

  useEffect(()=>{
// console.log(viddeoIndex,'conpanyIndex');
if(viddeoIndex===-1){
  setVideoIndex(-1);
}else{
  return;
}
  },[viddeoIndex])
  return (
    <div
      className="box-container"
      style={{
        width: width
          ? width
          : SmallSwitchTab
          ? "408px"
          : title === "设备总量"
          ? "370px"
          : title === "主要示范区" || title === "合作单位"
          ? "408px"
          : title === "项目介绍"
          ? "360px"
          : "360px",
        height: height,
        display: localStorage.getItem("jumpup") ? "none" : "block",
      }}
    >
      <div className="box-title">
        <img src={titleImg} />
        {title}
        {!pic && picText && (
          <span>{picText[picIndex]?.title || picText[picIndex]?.name}</span>
        )}
      </div>
      <div
        className="box-big-content"
        style={{ height: title === "酉阳主要示范区" ? "260px" : "none" }}
      >
        {companyDetail && (
          <div className="companyDetail-contain">
            <div className="company-info">
              <div className="company-picAndText">
                <img
                  src={companyDetail.company_pic}
                  width="88px"
                  height="55px"
                  alt=""
                  className="company-pic"
                />
                <div className="company-name">{companyDetail.fistColumn}</div>
                <div className="forward" onClick={()=>jumpTo(companyDetail)}>前往种植区</div>
              </div>
            </div>
          </div>
        )}
        {mutiple && <MultipeItem />}
        {verticalInfo && (
          <div className="link-basic">
            <div className="vertical-info">
              {verticalInfo.map((item, index) => (
                <div className="eachInfo" key={index}>
                  <div
                    className="vertical-count"
                    style={{
                      fontSize: title === "企业认养信息" ? "18px" : "24px",
                    }}
                  >
                    {item.count}
                    {item.symbol && (
                      <span className="symbol">{item.symbol}</span>
                    )}
                  </div>

                  <div className="link-bottom"></div>
                  <div>{item.title}</div>
                </div>
              ))}
            </div>
            {line && <img src={linePic} />}
          </div>
        )}

        {news && <News />}
        {verticalSecondInfo && (
          <div className="link-basic">
            <div className="vertical-info">
              {verticalSecondInfo.map((item, index) => (
                <div className="eachInfo" key={index}>
                  <div className="vertical-count">{item.count}</div>
                  <div className="link-bottom"></div>
                  <div>{item.title}</div>
                </div>
              ))}
            </div>
          </div>
        )}
        {company && (
          <div className="company-service">
            <div className="service-box">
              <span>专属客服电话</span>
              <div className="link-right"></div>
              <span>{company.mobile}</span>
            </div>
            <div className="service-box">
              <span>收货信息</span>
              <div className="link-right"></div>

              <div className="shouhuo-info">
                <div>
                  {company.address_user} <span>{company.address_mobile}</span>
                </div>
                <div>{company.address}</div>
              </div>
            </div>
          </div>
        )}
        {/* <SmallSwitchTabAndtb
                tab={['全部企业', '临近交付企业']}

            /> */}
        {content && <div className="box-content">{content}</div>}

        {pic && (
          <div className="pic-content">
            <img src={pic} />
          </div>
        )}
        {picText && (
          <div>
            {!pic && (
              <div className="pic-content">
                <img src={picText[picIndex]?.pic} />
              </div>
            )}
            <div className="picText-content" >
              {picText.map((item, index) => (
                <div
                  className={
                    title === "酉阳主要示范区" ? "pic-big-text" : "pic-text"
                  }
                  key={index}
                  onClick={() => {
                    changeTheScene(item.title, title, index,1);
                    setPicIndex(index);
                    pictureIndex(index);
                  }}
                >
                  <div className="picture-text-display">
                    <img src={item.pic} />
                    <span
                      className="pic-texxt"
                      style={{fontSize:14,border:'1px solid #257985', backgroundColor: index === picIndex ? a : b, opacity: index === picIndex?1:0.7}}

                    >
                      {item.title}
                    </span>
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}
        {/* {videoIndex!==-1 &&} */}
        {!companyExample?(<span ></span>)
         :(
          <div className="companyExample-content">
            {companyExample?.map((item, index) => (
              <div
                className={"pic-text"}
                key={index}
                onClick={() => {
                  changeTheScene(item.title, title, index,2);
                  setVideoIndex(index);
                  videooIndex(index);
                }}
              >
                <div className="picture-text-display">
                  <div className="picture-text-display">
                    <img src={item.pic} style={{ width: 200, height: 120 }} />
                    <img
                      src={playPic}
                      className="play-pic"
                      style={{ height: 50, width: 50 }}
                    />
                  </div>

                  <span
                    className="pic-texxt-posi"
                    style={{fontSize:14, border:'1px solid #257985', backgroundColor: index === videoIndex ? a : b, opacity: index === videoIndex?1:0.7}}
                  >
                    {item.title}
                  </span>
                </div>
              </div>
            ))}
          </div>
        )}

        {lineChart && (
          <div className="graphic-content">
            <DemoColumn />
          </div>
        )}
        {finished && (
          <div className="graphic-content">
            <DemoGauge />
          </div>
        )}

        {pieChart && (
          <div>
            <SmallSwitchTabAndPie
              data={pieChart}
              color={color}
              index={PieIndex}
              // setMiddleIndex={BoxsName}
              // middleName={middleBoxName}
              // tab={['种植区', '权属']}
              // pieDataFirst={pieChart.plant_area_chart}
              // pieFirstColor={['rgb(180,60,60)', 'rgb(139,0,180)', 'rgb(50,205,100)', 'rgb(70,130,180)', 'rgb(252,132,82)']}
              // pieLegendDataFirst={pieChart.plant_area_chart_title}
              // pieDataSecond={pieChart.owner_chart}
              // pieSecondColor={['#A0D032', '#5A9B64']}
              // pieLengendDataSecond={pieChart.owner_chart_title}
              // pieData3={pieChart.plant_status_chart}
              // pieColor3={['#BE72B0', '#C26F66']}
              // pieLegendData3={pieChart.plant_status_chart_title}
              // pieData4={pieChart.adopt_status_chart}
              // pieColor4={['#00B478', '#6495DC']}
              // pieLegendData4={pieChart.adopt_status_chart_title}
            />
            {/* <SmallSwitchTabAndPie
                            setMiddleIndex={BoxsName}
                            tab={['种植状态', '认养状态']}
                            middleName={middleBoxName}
                            pieDataFirst={pieChart.plant_status_chart}
                            pieLegendDataFirst={pieChart.plant_status_chart_title}
                            pieFirstColor={['#BE72B0', '#C26F66']}
                            pieDataSecond={pieChart.adopt_status_chart}
                            pieLengendDataSecond={pieChart.adopt_status_chart_title}
                            pieSecondColor={['#00B478', '#6495DC']}
                        /> */}
          </div>
        )}
        {arrFirstRow && (
          <div className="card-container">
            <div className="box-card">
              {arrFirstRow.map((item, index) => (
                <div className="single-card" key={index}>
                  <div className="card-num">{item.num}</div>
                  <div className="card-title">{item.title}</div>
                </div>
              ))}
            </div>
            <div className="box-card">
              line
              {arrSecondRow.map((item, index) => (
                <div className="single-card" key={index}>
                  <div className="card-num">{item.num}</div>
                  <div className="card-title">{item.title}</div>
                </div>
              ))}
            </div>
          </div>
        )}

        {infoFirstTab && (
          <div
            style={{ height: infoThirdTab ? "150px" : "88px" }}
            className="info-part"
          >
            <div className="info-tab">
              {infoFirstTab.map((item, index) => (
                <div key={index} className="single-info">
                  <div className="info-title">{item.title}</div>
                  <div className="link-right"></div>

                  <div className="info-num">{item.count}</div>
                </div>
              ))}
            </div>
            <div className="info-tab">
              {infoSecondTab &&
                infoSecondTab.map((item, index) => (
                  <div key={index} className="single-info">
                    <div className="info-title">{item.title}</div>
                    <div className="link-right"></div>

                    <div className="info-num">{item.count}</div>
                  </div>
                ))}
            </div>
            <div
              className="info-tab"
              style={{ display: infoThirdTab ? "auto" : "none" }}
            >
              {infoThirdTab &&
                infoThirdTab.map((item, index) => (
                  <div key={index} className="single-info">
                    <div className="info-title">{item.title}</div>
                    <div className="link-right"></div>
                    <div className="info-num">{item.count}</div>
                  </div>
                ))}
            </div>
          </div>
        )}
        {/* 功能检测系统的图片+文字 */}
        {iconAndTextFirstColumn && (
          <div className="iconText-display">
            <div className="single-column">
              {iconAndTextFirstColumn.map((item, index) => (
                <div
                  className="single-content"
                  key={index}
                  style={{
                    backgroundColor:
                      index === 0
                        ? "rgba(37, 121, 133, 1)"
                        : "rgba(31, 75, 85, 1)",
                  }}
                >
                  <img className="icon-display" src={`${item.icon}`}></img>
                  <div className="text-display">{item.title}</div>
                </div>
              ))}
            </div>
            <div className="single-column">
              {iconAndTextSecondColumn.map((item, index) => (
                <div className="single-content" key={index}>
                  <img className="icon-display" src={`${item.icon}`}></img>

                  <div className="text-display">{item.title}</div>
                </div>
              ))}
            </div>
            <div className="single-column">
              {iconAndTextThirdColumn.map((item, index) => (
                <div className="single-content" key={index}>
                  <img className="icon-display" src={`${item.icon}`}></img>

                  <div className="text-display">{item.title}</div>
                </div>
              ))}
            </div>
          </div>
        )}
        {/* 天气预报 */}
        {weather && (
          <div>
            <div className="weather-display">
              <div className="weather-left">
                <div className="weather-tempre">{weatherFirst.tempMax}°C</div>
                <div className="wind-direct">
                  <div style={{ color: "#9ebbcb" }}>风向</div>
                  <div>{weatherFirst.windDirDay}</div>
                </div>
                <div className="wind-direct">
                  <div style={{ color: "#9ebbcb" }}>降雨</div>
                  <div>{weatherFirst.textDay}</div>
                </div>
              </div>
              <div>
                <img className="weather-pic" src={weatherPic} />
              </div>
            </div>
            <div className="weather-date">
              {weather.map((item, index) => (
                <div className="single-date" key={index}>
                  <div>{item.week}</div>
                  <div>{item.tempMax}°</div>
                  <div>
                    <img src={item.weather_icon} />
                  </div>
                </div>
              ))}
            </div>
          </div>
        )}

        {selectFirst && (
          <div className="select-display">
            <div className="select-group">
              {selectFirst.map((item, index) => (
                <div
                  className="select-part"
                  key={index}
                  style={{ paddingTop: 8 }}
                >
                  <span
                    className="select-title"
                    style={{
                      marginRight: title === "种植管理" ? "24px" : "2px",
                    }}
                  >
                    {item.title}
                  </span>
                  <select
                    className="select-content"
                    onChange={(e) => {
                      if (select) {
                        setOptionSelect(false);
                      }
                      setSelectedOption(e, item.key, title);
                      setValue(item.id);
                    }}
                  >
                    {item.options.map((subItem, subIndex) => (
                      <option
                        key={subIndex}
                        selected={subIndex === 0 ? select : false}
                        value={subItem.id}
                        // selected={subItem.selected}
                      >
                        {subItem.name}
                      </option>
                    ))}
                    {/* <option></option>
                                        <option></option> */}
                  </select>
                </div>
              ))}
            </div>
            <div className="select-group">
              {selectSecond &&
                selectSecond.map((item, index) => (
                  <div className="select-part" key={index}>
                    <span
                      className="select-title"
                      style={{
                        marginRight: title === "种植管理" ? "24px" : "2px",
                      }}
                    >
                      {item.title}
                    </span>
                    <select
                      className="select-content"
                      // name={item.options[0]}

                      onChange={(e) => {
                        if (select) {
                          setOptionSelect(false);
                        }
                        setSelectedOption(e, item.key, title);
                      }}
                      // options={item.options}
                    >
                      {item.options.map((subItem, subIndex) => (
                        <option
                          key={subIndex}
                          selected={subIndex === 0 ? select : false}
                          value={subItem.id}
                        >
                          {subItem.name}
                        </option>
                      ))}
                    </select>
                  </div>
                ))}
            </div>
            {/* 搜索按钮 */}
            <div className="select-search">
              <div
                className="search-button"
                onClick={() => onSearchBtn("search", title)}
              >
                确认
              </div>
              <div className="link-right"></div>
              <div className="refresh-btn">
                刷新
                <img
                  src={refresh}
                  style={{ marginLeft: 2 }}
                  onClick={() => onSearchBtn("fresh")}
                />
              </div>
            </div>
          </div>
        )}
        {SmallSwitchTab && (
          // <SmallSwitchTabAndtb
          //     tab={['全部企业', '临近交付企业']}
          // />
          <div className="small-container">
            <div
              className="left-smallTab"
              onClick={() => {
                setSelectIndex(0);
                setCompanyDifferent(0);
              }}
              style={{
                color: selectIndex === 0 ? "#fff" : "#9EBBCB",
                backgroundImage:
                  selectIndex === 0
                    ? `url(${leftSelect})`
                    : `url(${leftUnSelect})`,
              }}
            >
              全部企业
            </div>
            <div
              className="right-smallTab"
              style={{
                color: selectIndex === 1 ? "#fff" : "#9EBBCB",
                backgroundImage:
                  selectIndex === 1
                    ? `url(${rightSelect})`
                    : `url(${rightUnselect})`,
              }}
              onClick={() => {
                setSelectIndex(1);
                setCompanyDifferent(1);
              }}
            >
              临近交付企业
            </div>
          </div>
        )}
        {tableListName && (
          <div className="table-list">
            <div
              className="table-title"
              style={{
                gap:
                  title === "企业认养信息"
                    ? "2px"
                    : title === "设备总量"
                    ? "0px"
                    : "16px",
              }}
            >
              {tableListName.map((item, index) => (
                <div
                  style={{
                    width:
                      item === "企业名称"
                        ? "136px"
                        : item === "认养面积"
                        ? "52px"
                        : item === "耕地编号"
                        ? "60px"
                        : item === "位置"
                        ? "32px"
                        : "auto",
                    textAlign: item === "企业名称" ? "center" : "left",
                  }}
                  key={index}
                  className="list-name"
                >
                  {item}
                </div>
              ))}
            </div>
            <div
              className="table-height"
              style={{
                height: SmallSwitchTab
                  ? "324px"
                  : fengxian
                  ? "276px"
                  : title === "设备总量"
                  ? "200px"
                  : title === "种植管理"
                  ? "352px"
                  : "514px",
                gap:
                  title === "风险预警提示"
                    ? "27px"
                    : title === "设备总量"
                    ? "0px"
                    : title === "种植管理"
                    ? "26px"
                    : "16px",
              }}
            >
              {tableList &&
                tableList.map((item, index) => (
                  <div
                    onClick={() => {
                      onClickFunction(title, index);
                      setSelectCompany(index);
                      onChangeCamera(title, index);
                    }}
                    className="table-info"
                    key={index}
                    style={{
                      border:
                        title === "风险预警提示"
                          ? "none"
                          : selectCompany === index
                          ? "1px solid #fff"
                          : "none",
                      background:
                        index % 2 !== 0
                          ? "linear-gradient(270deg, #1F4B55 0%, #12434E 100%)"
                          : "none",
                      justifyContent:
                        title === "种植管理" ? "space-between" : "space-around",
                      gap:
                        title === "设备总量"
                          ? "0px"
                          : title === "风险预警提示"
                          ? "0px"
                          : "16px",
                      padding: title === "种植管理" ? "8px 15px" : "8px 4px",
                    }}
                  >
                    <div
                      className="table-list-info"
                      style={{
                        width:
                          title === "企业认养信息"
                            ? "126px"
                            : title === "种植管理"
                            ? "66px"
                            : title === "设备总量"
                            ? "48px"
                            : title === "风险预警提示"
                            ? "62px"
                            : "auto",
                      }}
                    >
                      {item.fistColumn}
                    </div>
                    <div
                      className="table-list-info"
                      style={{
                        width:
                          title === "企业认养信息"
                            ? "55px"
                            : title === "种植管理"
                            ? "38px"
                            : "auto",
                      }}
                    >
                      {item.secondColumn}
                      {item.symbol}
                    </div>
                    <div className="table-list-info">{item.thirdColumn}</div>
                    <div
                      className="table-list-info"
                      onClick={() => {}}
                      style={{
                        background:
                          item.fourthColumn === "定位"
                            ? "linear-gradient(269.99999978929463deg, rgba(40, 135, 129, 1) -0%, rgba(32, 154, 181, 1) 100%)"
                            : "none",
                        padding: item.fourthColumn === "定位" ? "4px" : "0px",
                        color: compareDate(item.is_last),
                        width:
                          title === "企业认养信息"
                            ? "54px"
                            : title === "设备总量"
                            ? "32px"
                            : "auto",
                      }}
                    >
                      {item.fourthColumn || item.fourColumn}
                    </div>
                    {item.fifthColumn && (
                      <div className="table-list-info">{item.fifthColumn}</div>
                    )}
                  </div>
                ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
export default ContentBox;
